<template>
  <div>
    <el-dialog
        :visible="true"
        :show-close="false"
        :close-on-click-modal="false"
        :modal-append-to-body="true"
        width="95%"
    >
      <div class="pdf-box" :style="{
              width: scale + '%',
              transform: 'rotate(' + pageRotate + 'deg)',
            }">
        <div
            ref="pdf"
            class="pdf"
        >
          <PDF :src="pdfSrc"> </PDF>
        </div>
        <div class="pdf-table">
          <i class="el-icon-circle-plus-outline color" @click="handleBig"></i>
          <i class="el-icon-remove-outline color" @click="handleSmall"></i>
          <i class="el-icon-refresh-left color" @click="handleRotate"></i>
          <i class="el-icon-circle-close color" @click="handleClose"></i>
        </div>
      </div>
      <van-overlay :show="true" @click="handleClose"/>
    </el-dialog>
  </div>
</template>

<script>
import PDF from 'vue-pdf'
export default {
  // 组件属性、变量
  props: {
    pdfSrc: {
      type: String,
      default() {
        return ''
      }
    }
  },
  // 变量
  data() {
    return {
      numPages: undefined,
      pageRotate: 0,
      scale: 105,
    }
  },
  // 使用其他组件
  components: {
    PDF // 6789wse
  },
  // 方法
  methods: {
    handleClose() {
      this.$emit('handleClose')
    },
    // 旋转
    handleRotate() {
      this.pageRotate += 90
      if (this.pageRotate === 360) {
        this.pageRotate = 0
      }
    },
    // 下载
    fileDownload(url) {
      window.open(url)
    },
    //放大
    handleBig() {
      this.scale += 15
    },

    //缩小
    handleSmall() {
      if (this.scale === 100) {
        return
      }
      this.scale += -5
    },
  },
  mounted() {
    this.$nextTick(() => {
      var div1 = document.querySelector('.pdf-box');
      //限制最大宽高，不让滑块出去
      var oL = 0
      var oT = 0
      //手指触摸开始，记录div的初始位置
      div1.addEventListener('touchstart', function(e) {
        var ev = e || window.event;
        var touch = ev.targetTouches[0];
        oL = touch.clientX - div1.offsetLeft;
        oT = touch.clientY - div1.offsetTop;
        document.addEventListener("touchmove", defaultEvent, false);
      });
      //触摸中的，位置记录
      div1.addEventListener('touchmove', function(e) {
        var ev = e || window.event;
        var touch = ev.targetTouches[0];
        var oLeft = touch.clientX - oL;
        var oTop = touch.clientY - oT;
        div1.style.left = oLeft + 'px';
        div1.style.top = oTop + 'px';
      });
      //触摸结束时的处理
      div1.addEventListener('touchend', function() {
        document.removeEventListener("touchmove", defaultEvent);
      });
      //阻止默认事件
      function defaultEvent(e) {
        e.preventDefault();
      }
    })
  }
}
</script>

<style scoped>
/deep/.el-dialog {
  margin-top: 8vh !important;
  background-color: rgba(0,0,0,.2);
}
/deep/.el-dialog__body {
  padding: 0 10px !important;
  font-size: 15px;
  background-color: rgba(0,0,0,.2);
}
/deep/.el-dialog__header {
  padding: 10px !important;
}
.pdf {
  width: 100%;
  height: 500px;
}
.pdf-box {
  position: absolute;
  width: 100%;
  height: 500px;
  left: -9px;
  z-index: 100;
}
.pdf-table {
  position: absolute;
  display: flex;
  right: 0px;
  bottom: 50px;
  align-items: center;
  flex-direction: column;
  cursor: pointer;
  font-size: 30px;
}
.color {
  color: deepskyblue;
}
</style>
